<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="data-spm" content="1" data-spm-protocol="i"/>
    <meta name="viewport"
          content="width=device-width,
           initial-scale=1.0,
          maximum-scale=1.0,
           minimum-scale=1.0,
           user-scalable=no">
    <link href="/kissy/build/css/dpl/base.css" rel="stylesheet"/>
    <link href="/kissy/src/navigation-view/assets/dpl.css" rel="stylesheet">
    <link href="/kissy/src/scroll-view/assets/dpl.css" rel="stylesheet"/>
    <link href="/kissy/src/menu/assets/dpl.css" rel="stylesheet"/>
    <style>
        .ks-menu {
            padding: 0;
        }

        .ks-menuitem {
            border-top: 1px solid #dedede;
            min-height: 47px;
            color: black;
            padding: 12px 15px;
            font-size: 18px;
        }

        .ks-navigation-view-content {
            background: #eeeeee;
        }

        .anim-title {
            text-align: center;
            font-size: 18px;
            line-height: 24px;
            color: #444;
            text-shadow: rgba(255, 255, 255, 0.3) 0 1px 0;
            padding: 10px;
            width: 75%;
            margin: 0 auto;
        }

        .anim-content {
            text-align: center;
            font-size: 18px;
            line-height: 24px;
            color: #444;
            text-shadow: rgba(255, 255, 255, 0.3) 0 1px 0;
            padding: 10px;
            width: 75%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
KISSY.use('util,component/control,' +
        'component/container,' +
        'navigation-view,' +
        'navigation-view/bar,' +
        'node,' +
        'router,' +
        'promise,' +
        'scroll-view,' +
        'scroll-view/plugin/scrollbar,' +
        'menu',
        function (S, Control, Container, NavigationView, Bar, Node, router, Promise, ScrollView, ScrollBar) {
            var win = Node.all(window);

            var anims = [
                {
                    content: 'loading'
                },
                {
                    content: 'default-anim'
                },
                {
                    content: 'none-anim',
                    value: {
                        enter: 'none',
                        leave: 'none'
                    }
                },
                {
                    content: 'slide-left-anim',
                    value: {
                        enter: 'slide-left',
                        leave: 'slide-right'
                    }
                },
                {
                    content: 'slide-top-anim',
                    value: {
                        enter: 'slide-top',
                        leave: 'slide-bottom'
                    }
                },
                {
                    content: 'slide-bottom-anim',
                    value: {
                        enter: 'slide-bottom',
                        leave: 'slide-top'
                    }
                },
                {
                    content: 'fade-anim',
                    value: {
                        enter: 'fade',
                        leave: 'fade'
                    }
                },
                {
                    content: 'pop-anim',
                    value: {
                        enter: 'pop',
                        leave: 'pop'
                    }
                },
                {
                    content: 'flip-left-anim',
                    value: {
                        enter: 'flip-left',
                        leave: 'flip-right'
                    }
                },
                {
                    content: 'flip-right-anim',
                    value: {
                        enter: 'flip-right',
                        leave: 'flip-left'
                    }
                },
                {
                    content: 'swap-left-anim',
                    value: {
                        enter: 'swap-left',
                        leave: 'swap-right'
                    }
                },
                {
                    content: 'swap-right-anim',
                    value: {
                        enter: 'swap-right',
                        leave: 'swap-left'
                    }
                },
                {
                    content: 'cube-left-anim',
                    value: {
                        enter: 'swap-left',
                        leave: 'swap-right'
                    }
                },
                {
                    content: 'cube-right-anim',
                    value: {
                        enter: 'swap-right',
                        leave: 'swap-left'
                    }
                },
                {
                    content: 'flow-left-anim',
                    value: {
                        enter: 'flow-left',
                        leave: 'flow-right'
                    }
                },
                {
                    content: 'flow-right-anim',
                    value: {
                        enter: 'flow-right',
                        leave: 'flow-left'
                    }
                },
                {
                    content: 'turn-anim',
                    value: {
                        enter: 'turn',
                        leave: 'turn'
                    }
                }
            ];

            var getAnimValue = function (content) {
                for (var i = 0; i < anims.length; i++) {
                    if (anims[i].content === content) {
                        return anims[i].value;
                    }
                }
                return null;
            };

            var navigationView = new NavigationView({
                render: 'body'
            }).render();

            var bar = new Bar({
                navigationView: navigationView,
                elBefore: navigationView.get('contentEl')
            }).render();

            bar.on('backward', function (e) {
                e.preventDefault();
                history.back();
            });

            router.on('dispatch', function (e) {
                if (e.request.backward) {
                    navigationView.pop();
                }
            });

            var tpl = '<h2 class="anim-title">{title}</h2>' +
                    '<p class="anim-content">Sed ut perspiciatis unde omnis iste natus error ' +
                    'sit voluptatem accusantium doloremque laudantium, ' +
                    'totam rem aperiam, eaque ipsa quae ab illo inventore ' +
                    'veritatis et quasi architecto beatae vitae dicta sunt ' +
                    'explicabo. Nemo enim ipsam voluptatem quia voluptas sit ' +
                    'aspernatur aut odit aut fugit, sed quia consequuntur magni ' +
                    'dolores eos qui ratione voluptatem sequi nesciunt. Neque porro ' +
                    'quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, ' +
                    'adipisci velit, sed quia non numquam eius modi tempora incidunt ut ' +
                    'labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima ' +
                    'veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, ' +
                    'nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum ' +
                    'iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae ' +
                    'consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>';

            ScrollView.extend({
                enter: function () {
                    S.log('enter detail');
                    win.on('resize', this.sync, this);
                    this.sync();
                },

                leave: function () {
                    S.log('leave detail');
                    win.detach('resize', this.sync, this);
                },

                createDom: function () {
                    this.get('contentEl').html(util.substitute(tpl, {
                        title: this.get('viewId')
                    }));
                }
            }, {
                xclass: 'tb-anim-view',
                ATTRS: {
                    plugins: {
                        valueFn: function () {
                            return [ScrollBar];
                        }
                    }
                }
            });

            ScrollView.extend({
                enter: function () {
                    var self = this;
                    S.log('enter loading');
                    win.on('resize', self.sync, self);
                    self.sync();
                    var defer = new Promise.Defer();
                    self.promise = defer.promise;
                    setTimeout(function () {
                        self.get('contentEl').html(util.substitute(tpl, {
                            title: self.get('viewId')
                        }));
                        self.sync();
                        defer.resolve();
                    }, 1400);
                },

                leave: function () {
                    S.log('leave loading');
                    win.detach('resize', this.sync, this);
                }
            }, {
                xclass: 'tb-loading-view',
                ATTRS: {
                    plugins: {
                        valueFn: function () {
                            return [ScrollBar];
                        }
                    }
                }
            });

            router.get('/loading', function (request) {
                if (!request.backward) {
                    navigationView.push({
                        xclass: 'tb-loading-view',
                        title: 'loading',
                        viewId: 'loading'
                    });
                }
            });

            router.get('/:anim', function (request) {
                if (!request.backward) {
                    navigationView.push({
                        xclass: 'tb-anim-view',
                        title: request.params.anim,
                        viewId: request.params.anim,
                        animation: getAnimValue(request.params.anim)
                    });
                }
            });

            ScrollView.extend({
                enter: function () {
                    S.log('enter index');
                    win.on('resize', this.sync, this);
                    this.sync();
                },

                leave: function () {
                    S.log('leave index');
                    win.detach('resize', this.sync, this);
                },

                initializer: function () {
                    var items = [];
                    util.each(anims, function (anim) {
                        items.push({
                            xclass: 'menuitem',
                            content: anim.content
                        });
                    });

                    this.set('children', [
                        {
                            xclass: 'menu',
                            listeners: {
                                click: {fn: this.onMenuItemClick, context: this}
                            },
                            children: items
                        }
                    ]);
                },

                onMenuItemClick: function (e) {
                    router.navigate('/' + e.target.get('content'))

                }
            }, {
                xclass: 'tb-index-view',
                ATTRS: {
                    plugins: {
                        valueFn: function () {
                            return [ScrollBar];
                        }
                    },
                    title: {
                        value: 'navigation-view'
                    }
                }
            });

            router.get('/', function (request) {
                if (!request.backward) {
                    navigationView.push({
                        xclass: 'tb-index-view'
                    });
                }
            });

            router.config({
                triggerRoute: true,
                // for test
                historyPushState: location.href.indexOf('useHashChange') === -1,
                useHash: true
            });

            router.start();
        });

window.onerror = function (e) {
    alert(e);
}
</script>
</body>
</html>